<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文章标题 - 我的个人博客</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header class="header">
      <div class="container">
        <h1 class="logo">我的博客</h1>
        <nav class="main-nav">
          <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="about.html">关于我</a></li>
            <li><a href="#contact">联系我</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="container article-container">
      <article class="article-content">
        <header>
          <h1>深色模式开发的最佳实践</h1>
          <div class="article-meta">
            <span class="author">作者: cqyyyyy</span>
            <span class="date">发布时间: 2025年6月8日</span>
            <span class="category">分类: 前端开发</span>
          </div>
        </header>

        <button
          id="toggle-dark"
          class="btn"
          style="float: right; margin-bottom: 10px"
        >
          切换深色模式
        </button>
        <img src="./img/darkmode.png" alt="深色模式" class="featured-image" />

        <div class="article-body">
          <p>
            深色模式（Dark
            Mode）已成为现代应用和网站的重要特性。它不仅能减轻用户视觉疲劳，还能在低光环境下提升体验。本文将介绍深色模式开发的最佳实践。
          </p>

          <h2>1. 使用 CSS 变量</h2>
          <p>利用 CSS 变量统一管理颜色，便于主题切换。例如：</p>
          <pre><code>:root {
        --bg-color: #fff;
        --text-color: #222;
      }
      body.dark-mode {
        --bg-color: #18191a;
        --text-color: #e4e6eb;
      }</code></pre>

          <h2>2. 主题切换实现</h2>
          <p>
            通过添加 <code>dark-mode</code> 类到
            <code>&lt;body&gt;</code>，即可切换主题。可用 JavaScript
            实现按钮切换：
          </p>
          <pre><code>document.getElementById('toggle-dark').onclick = function() {
        document.body.classList.toggle('dark-mode');
      }</code></pre>

          <h2>3. 保持良好的对比度</h2>
          <p>
            深色模式下，确保文本与背景有足够对比度，提升可读性。可借助<a
              href="https://webaim.org/resources/contrastchecker/"
              target="_blank"
              >对比度检查工具</a
            >。
          </p>

          <h2>4. 图片与插图适配</h2>
          <p>
            优先使用透明背景的图片或为深色模式准备专用插图，避免图片在深色背景下不清晰。
          </p>

          <h2>5. 尊重用户系统偏好</h2>
          <p>
            可通过
            <code>prefers-color-scheme</code> 媒体查询自动适配用户系统主题：
          </p>
          <pre><code>@media (prefers-color-scheme: dark) {
        body {
          --bg-color: #18191a;
          --text-color: #e4e6eb;
        }
      }</code></pre>
        </div>

        <footer class="article-footer">
          <div class="tags">
            <span>标签: </span>
            <a href="#">深色模式</a>, <a href="#">前端开发</a>,
            <a href="#">CSS</a>
          </div>
        </footer>
      </article>

      <section class="comments-section">
        <h2>评论</h2>

        <div id="comments-list">
          <div class="comment">
            <div class="comment-author">
              <img src="./img/avatar-02.jpg" alt="用户头像" />
              <span>李四</span>
            </div>
            <div class="comment-content">
              <p>这篇文章写得很好，让我对深色模式有了更好的理解！</p>
              <div class="comment-meta">2023年5月16日</div>
            </div>
          </div>

          <div class="comment">
            <div class="comment-author">
              <img src="./img/avatar-03.jpg" alt="用户头像" />
              <span>王五</span>
            </div>
            <div class="comment-content">
              <p>切换深色模式按钮让我有了更好的体验，期待后续文章！</p>
              <div class="comment-meta">2023年5月17日</div>
            </div>
          </div>
        </div>

        <form id="comment-form" class="comment-form">
          <h3>发表评论</h3>
          <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required />
          </div>
          <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required />
          </div>
          <div class="form-group">
            <label for="comment">评论:</label>
            <textarea id="comment" name="comment" rows="5" required></textarea>
          </div>
          <button type="submit" class="btn">提交评论</button>
        </form>
      </section>
    </div>

    <footer class="footer">
      <div class="container">
        <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
        <div class="social-links">
          <a href="#"><i class="fab fa-github"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
      </div>
    </footer>

    <button id="back-to-top" title="回到顶部">↑</button>

    <script src="js/script.js"></script>
  </body>
</html>
